<template>
  <div class="courseSection">
    <el-card>
      <div slot="header">
        课程名称
      </div>
      <el-tree
        :data="data"
        :props="defaultProps"
        @node-click="handleNodeClick"
        draggable
        :allow-drop="allowDrop"
        @node-drop="handleSort"
      >
        <template v-slot="obj">
          <div
            style="flex:1;display:flex;justify-content:space-between;align-items:center;"
          >
            <span>{{ obj.node.label }}</span>
            <span
              v-if="Object.keys(obj.data).some(ele => ele === 'lessonDTOS')"
              class="actions"
            >
              <el-button @click.stop="editSection(obj.node)">编辑</el-button>
              <el-button type="primary" @click.stop="addLesson(obj.node)"
                >添加课时</el-button
              >
              <el-select
                v-model="obj.node.data.status"
                placeholder="请选择状态"
                @change="handleChange1(obj.node, $event)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
            <span v-else class="actions">
              <el-button @click.stop="editLesson(obj.node)">编辑</el-button>
              <el-button
                type="success"
                @click="
                  $router.push({
                    name: 'course-video',
                    params: {
                      courseId
                    },
                    query: {
                      lessonId: obj.data.id,
                      sectionId: obj.node.parent.id
                    }
                  })
                "
                >上传视频</el-button
              >
              <el-select
                v-model="obj.node.data.status"
                placeholder="请选择状态"
                @change="handleChange2(obj.node, $event)"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </span>
          </div>
        </template>
      </el-tree>
    </el-card>
    <el-dialog title="添加课时" :visible.sync="showAddLesson" width="50%">
      <el-input v-model="theme" placeholder="请输入主题"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddLesson">取 消</el-button>
        <el-button type="primary" @click="confirmAddLesson">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑章节" :visible.sync="showAddLesson2" width="50%">
      <el-input v-model="sectionName" placeholder="请输入章节名"> </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddLesson2">取 消</el-button>
        <el-button type="primary" @click="confirmAddLesson2">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑课时" :visible.sync="showAddLesson3" width="50%">
      <label style="display:flex;align-items:center;">
        <div style="width:100px;">课时名:</div>
        <el-input v-model="lessonName" placeholder="请输入课时名"> </el-input>
      </label>
      <label style="display:flex;align-items:center;margin-top:20px;">
        <div style="width:100px;">是否试看:</div>
        <el-switch
          v-model="isFree"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </label>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddLesson3">取 消</el-button>
        <el-button type="primary" @click="confirmAddLesson3">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import {
  getSectionAndLesson,
  saveOrUpdateSection,
  saveOrUpdateLesson
} from './api/index'
export default Vue.extend({
  name: 'courseSection',
  props: {
    courseId: {
      type: [String, Number],
      required: true
    }
  },
  async created () {
    await this.getSectionAndLesson()
  },
  data () {
    return {
      options: [
        {
          value: 0,
          label: '隐藏'
        },
        {
          value: 1,
          label: '待更新'
        },
        {
          value: 2,
          label: '已发布'
        }
      ],
      options2: [
        {
          value: 0,
          label: '隐藏'
        },
        {
          value: 1,
          label: '未发布'
        },
        {
          value: 2,
          label: '已发布'
        }
      ],
      data: [],
      defaultProps: {
        children: 'lessonDTOS',
        label: data => {
          return data.sectionName || data.theme
        }
      },
      showAddLesson: false,
      theme: '',
      sectionId: null,
      showAddLesson2: false,
      sectionName: '',
      showAddLesson3: false,
      lessonName: '',
      lessonId: null,
      isFree: false
    }
  },
  methods: {
    cancelAddLesson () {
      this.showAddLesson = false
      this.theme = ''
    },
    cancelAddLesson2 () {
      this.showAddLesson2 = false
      this.sectionName = ''
    },
    cancelAddLesson3 () {
      this.showAddLesson3 = false
      this.lessonName = ''
    },
    async confirmAddLesson () {
      this.showAddLesson = false
      await saveOrUpdateLesson({
        theme: this.theme,
        courseId: this.courseId,
        sectionId: this.sectionId
      })
      this.$message.success('操作成功')
      this.theme = ''
      await this.getSectionAndLesson()
    },
    async confirmAddLesson2 () {
      this.showAddLesson2 = false
      await saveOrUpdateSection({
        sectionName: this.sectionName,
        id: this.sectionId
      })
      this.$message.success('操作成功')
      this.sectionName = ''
      await this.getSectionAndLesson()
    },
    async confirmAddLesson3 () {
      this.showAddLesson3 = false
      await saveOrUpdateLesson({
        id: this.lessonId,
        theme: this.lessonName,
        courseId: this.courseId,
        sectionId: this.sectionId,
        isFree: this.isFree
      })
      this.$message.success('操作成功')
      this.lessonName = ''
      await this.getSectionAndLesson()
    },

    handleNodeClick (data) {
      console.log(data)
    },
    async getSectionAndLesson () {
      const { data } = await getSectionAndLesson(this.courseId)
      console.log(data)
      this.data = data.data
    },
    allowDrop (draggingNode, dropNode, type) {
      // console.log(draggingNode)
      // console.log(dropNode)
      // console.log(type)
      // 不允许插入
      return (
        type !== 'inner' &&
        draggingNode.data.sectionId === dropNode.data.sectionId
      )
    },
    async handleSort (draggingNode, dropNode, type, event) {
      console.log(dropNode.parent)
      await Promise.all(
        dropNode.parent.childNodes.map((item, index) => {
          const keys = Object.keys(draggingNode.data)
          const has = keys.some(ele => {
            return ele === 'lessonDTOS'
          })
          if (has) {
            console.log('if')
            return saveOrUpdateSection({
              id: item.data.id,
              orderNum: index + 1
            })
          } else {
            console.log('else')
            console.log(item)
            return saveOrUpdateLesson({
              orderNum: index + 1,
              id: item.data.id
            })
          }
        })
      )
      this.$message.success('排序成功')
    },
    async addLesson (obj) {
      console.log('add')
      console.log(obj)
      this.showAddLesson = true
      this.sectionId = obj.data.id
    },
    async editSection (obj) {
      console.log('edit')
      console.log(obj)
      this.showAddLesson2 = true
      this.sectionId = obj.data.id
      this.sectionName = obj.data.sectionName
    },
    async editLesson (obj) {
      console.log('edit')
      console.log(obj)
      // return false
      /*eslint-disable */
      this.showAddLesson3 = true;
      this.sectionId = obj.data.sectionId;
      this.lessonName = obj.data.theme;
      this.lessonId = obj.data.id;
      this.isFree = obj.data.isFree;
    },
    async handleChange1(obj, value) {
      console.log(obj);
      console.log(value);
      await saveOrUpdateSection({
        id: obj.data.id,
        status: value
      });
      this.$message.success("操作成功");
      await this.getSectionAndLesson();
    },
    async handleChange2(obj, value) {
      console.log(obj);
      console.log(value);
      await saveOrUpdateLesson({
        id: obj.data.id,
        status: value
      });
      this.$message.success("操作成功");
      await this.getSectionAndLesson();
    }
  }
});
</script>

<style scoped>
.courseSection >>> .el-tree-node__content {
  justify-content: space-between !important;
  height: auto !important;
  padding: 10px 0px;
  border-bottom: 1px solid #ebeef5;
}
</style>
